<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建项目</title>
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" href="style/chosen.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/input.js"></script>
</head>
<body>
    <div class="index_header">
        <div class="center">
            <div class="logo"><a href="javascript:">培育计划申报</a></div>
            <div class="state">
                <span>
                    <a href="javascript:">
                        <img src="images/portrait.jpg">李华
                    </a>
                    <ul>
                        <li><a href="javascript:">个人信息</a></li>
                        <li><a href="javascript:">我的消息</a></li>
                        <li><a href="javascript:">修改密码</a></li>
                        <li><a href="javascript:">清除缓存</a></li>
                    </ul>
                </span>
                <span><a  href="javascript:">退出</a></span>
            </div>
        </div>
    </div>
    <div class="edit_pro">
        <div class="bule_bg"></div>
        <div class="content">
            <div class="title">创建项目</div>
            <div class="basic_infor">
                <div class="head">
                    <span>基本信息</span>
                </div>
                <div class="container">
                    <span>*</span>项目名称
                    <input type="text" name="project" id="inputl" placeholder="简洁清晰，不多于10个字">
                </div>
                <div class="container">
                    <span class="field">
                        <span>*</span>所属领域
                    </span>

                    <select data-placeholder="请选择所属于领域" class="chosen-select" multiple tabindex="4">
                        <option value=""></option>
                        <option value="自然科学类学术论文">自然科学类学术论文</option>
                        <option value="哲学社会科学类社会调查报告和学术论文">哲学社会科学类社会调查报告和学术论文</option>
                        <option value="科技发明制作">科技发明制作</option>
                        <option value="创业计划">创业计划</option>
                        <option value="创业实践">创业实践</option>
                    </select>

                </div>
            </div>
            <div class="pro_intro">
                <div class="head">
                    <span>项目介绍</span>
                </div>
                <div class="container">
                    <div class="name">
                        <span>*</span>项目描述
                    </div>
                    <textarea placeholder="可拆分为产品描述、用户群体、项目愿景、竞争对手等方面详细描述" id="txt1"></textarea>
                    <div class="limit"><span id="word1">150</span>/150</div>
                </div>
                <div class="container">
                    <div class="name1">
                        <span>*</span>负责人简介
                    </div>
                    <textarea placeholder="介绍自己" id="txt2"></textarea>
                    <div class="limit"><span id="word2">150</span>/150</div>
                </div>
            </div>
            <div class="upload">
                <div class="head">
                    <span>项目上传</span>
                </div>
                <div class="container">
                    <div class="name2">
                        <span>*</span>项目计划书
                    </div>
                    <div class="upload_file">                    	
                    	<a  href="javascript:" class="sim_file">
                    		上传项目
                    		<input type="file" name="" placeholder="请选择上传文件">
                    	</a>
                    	<span class="showFileName1">未选择任何文件</span>
                    	<span class="fileerrorTip1"></span>
                    </div>
                    <p class="notes">格式为pdf、word，不超过20M，文件数量限一个。</p>
                </div>
            </div>
            <button>确定</button>
        </div>
    </div>
    <div class="footer">
        <div class="link">
            <a>友情链接：</a>
            <a href="javascript:">学院概况</a><span></span>
            <a href="javascript:">政策法规</a><span></span>
            <a href="javascript:">服务平台</a><span></span>
            <a href="javascript:">下载专区</a><span></span>
            <a href="javascript:">联系我们</a><span></span>
            <a href="javascript:">后台管理</a>
        </div>
        <div class="msg">
            <p>地址：广东省茂名市茂南区官渡二路139号广东石油化工学院</p>
            <p>联系电话：13900000 <span>邮箱：12455@163.com</span></p>
        </div>
        <span>©2017  广东石油化工学院创新创业学院  版权所有</span>
    </div>
    
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){

        $(".chosen-search-input").focus(function(){
            $(this).css("box-shadow","none");
        });


        // 限制字数
        $("#inputl").keyup(function(){
            if($("#inputl").val().length > 10){
                $("#inputl").val( $("#inputl").val().substring(0,10) );
            }
        })
        $("#txt1").keyup(function(){  
            if($("#txt1").val().length > 150){
                $("#txt1").val( $("#txt1").val().substring(0,150) );
            }
            $("#word1").text( 150 - $("#txt1").val().length ) ;
        });
        $("#txt2").keyup(function(){  
            if($("#txt2").val().length > 150){
                $("#txt2").val( $("#txt2").val().substring(0,150) );
            }
            $("#word2").text( 150 - $("#txt2").val().length ) ;
        });



        // 模拟input type为file
        $(".sim_file").on("change","input[type='file']",function(){
		    var filePath=$(this).val();
		    if(filePath.indexOf("doc")!=-1 || filePath.indexOf("pdf")!=-1){
		        $(".fileerrorTip1").html("").hide();
		        var arr=filePath.split('\\');
		        var fileName=arr[arr.length-1];
		        $(".showFileName1").html(fileName);
		    }else{
		        $(".showFileName1").html("");
		        $(".fileerrorTip1").html("上传文件类型有误！").show();
		        return false
		    }
		})
    })
</script>
</body>
</html>